<template>
  <div>
    <van-sticky :offset-top="0">
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />

      <van-tabs @click="onClick" v-model="active">
        <van-tab
          v-for="item in topList"
          :key="item.id"
          :title="item.name"
        ></van-tab>
      </van-tabs>
    </van-sticky>

    <!-- 标题 -->
    <div class="title">
      <h3>{{ name }}</h3>
      <p>{{ des }}</p>
    </div>
    <!-- 商品列表 -->
    <div class="goods" v-if="act == 'goods'">
      <div
        @click="togoodsinfo(item.id)"
        class="item"
        v-for="item in datalist.data"
        :key="item.id"
      >
        <img :src="item.list_pic_url" alt="" />
        <h3>{{ item.name }}</h3>
        <p>{{ item.retail_price }}</p>
      </div>
    </div>
    <div class="nodata" v-else>数据库内暂无数据...</div>
  </div>
</template>

<script>
import {
  indexaction,
  currentaction,
  categoryNav,
  goodsList,
} from "@/api/category/index";
export default {
  components: {},

  data() {
    return {
      topList: [],
      active: 0,
      arr: [],
      datalist: [],
      id: "",
      name: "",
      des: "",
      title: "",
      act: "goods",
    };
  },

  created() {
    if (this.$route.params.name1) {
      var categorysortobj = {
        name1: this.$route.params.name1,
        name2: this.$route.params.name2,
        id1: this.$route.params.id1,
        id2: this.$route.params.id2,
      };
      localStorage.setItem("categorysortobj", JSON.stringify(categorysortobj));
    }

    this.title = JSON.parse(localStorage.getItem("categorysortobj")).name1;

    // 获取顶部对应位置的tag
    categoryNav({
      id: JSON.parse(localStorage.getItem("categorysortobj")).id2,
    }).then((res) => {
      // console.log(res.navData);
      this.topList = res.navData;
      this.topList.forEach((el) => {
        var obj = {};
        obj.name = el.name;
        obj.id = el.id;
        this.arr.push(obj);
      });
      this.active = this.arr.findIndex(
        (el) =>
          el.name == JSON.parse(localStorage.getItem("categorysortobj")).name2
      );
    });

    // 获取到了小的分类的商品
    goodsList({
      categoryId: JSON.parse(localStorage.getItem("categorysortobj")).id2,
    }).then((res) => {
      console.log(res.data);
      if (res.data.length == 0) {
        this.act = "no";
      } else {
        this.act = "goods";
      }
      this.name = res.currentNav.name;
      this.des = res.currentNav.front_desc;
      this.datalist = res;
    });
  },

  mounted() {},

  methods: {
    togoodsinfo(goodsid) {
      // console.log(goodsid);
      this.$router.push({
        name: "goodsinfo",
        params: {
          id: goodsid,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 切换获取商品
    onClick(name, title) {
      console.log(name);
      goodsList({
        categoryId: this.arr[name].id,
      }).then((res) => {
        console.log(res.data);
        if (res.data.length == 0) {
          this.act = "no";
        } else {
          this.act = "goods";
        }
        this.name = res.currentNav.name;
        this.des = res.currentNav.front_desc;
        this.datalist = res;
      });
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
// 标题
.title {
  width: 375px;
  padding: 20px 0;
  background-color: #fff;
  margin: 0px auto;
  margin-top: 5px;
  h3 {
    color: #666;
    padding: 5px 0;
  }
  p {
    color: #999;
    padding: 5px 0;
  }
}
.goods {
  width: 375px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 60px;
  h4 {
    font-size: 18px;
    margin: 00px auto;
    margin-top: 160px;
    color: #999;
  }
  .item {
    width: 185px;
    margin-top: 5px;
    background-color: #fff;
    img {
      width: 151px;
    }
    h3 {
      width: 165px;
      margin: 5px auto;
    }
    p {
      color: red;
      margin-bottom: 20px;
    }
  }
}
.nodata {
  width: 375px;
  height: 150px;
  line-height: 150px;

  color: rgb(255, 0, 0);
}
</style>